<template>
  <div id="MoiveSoon">
    <router-link
      :to="`/content:${item.id}`"
      tag="div"
      class="Router-div"
      v-for="(item,index) in list"
      :key="index"
    >
      <div class="images">
        <!-- <img :src="item.images.samll" /> -->
        <img :src="item.images.small" alt="豆瓣图片不给用,凑合凑合" title="豆瓣图片不给用,凑合凑合" />
      </div>
      <div class="contents">
        <p class="points">
          <span>{{item.title}}</span>
          <span>{{item.rating.average}}</span>
        </p>
        <p>
          类型:
          <span v-for="genre in item.genres" :key="genre.id">{{genre}}、</span>
        </p>
        <p>
          导演:
          <span v-for="director in item.directors" :key="director.id">{{director.name}}</span>
        </p>
        <p>
          演员:
          <span v-for="cast in item.casts" :key="cast.id">{{cast.name}}、</span>
        </p>
        <p>{{item.year}}年作品</p>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      myUrl: "in_theaters",
      count: 10,
      start: 0
    };
  },
  methods: {
    Request() {
      this.myUrl = this.$route.path.split("/")[1];
      console.log(this.myUrl);
      console.log(this.$route.query.tag);
      if (this.myUrl == "search") {
        alert(this.$route.query.tag);
        var url =
          "https://movie.douban.com/j/search_subjects?type=movie&tag=" +
          this.$route.query.tag +
          "&page_limit=50&page_start=0&tdsourcetag=s_pcqq_aiomsg&qq-pf-to=pcqq.c2c";
      } else {
        var url =
          "http://api.douban.com/v2/movie/" +
          this.myUrl +
          "?apikey=0df993c66c0c636e29ecbb5344252a4a&start=" +
          this.start +
          "&count=" +
          this.count +
          "&tdsourcetag=s_pcqq_aiomsg&qq-pf-to=pcqq.c2c";
      }

      this.$http.jsonp(url).then(res => {
        this.list = res.body.subjects;

        this.$store.commit("savaList", res.body.subjects);
      }).catch(error =>{
        console.log(error)
      });
    }
  },
  mounted() {
    // var datas = this.$store.state.list;
    // if (datas) {
    //   this.list = this.$store.state.list;
    // } else {
    this.Request();
    // }
  },
  watch: {
    $route: "Request"
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
</style>>

